<template>
	<view class="page-container back-grey-light">
		<view class="row-box sb back-white prow-l item-b bb">
			<text>头像</text>
			<button class="row-box" :plain="true" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-avatar :style="{height: 108+'rpx'}" :size="108" :src="avatar"></u-avatar>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</button>
		</view>
		<view class="row-box sb back-white prow-l item mb-base" @click="goEditNickName()">
			<text>昵称</text>
			<view class="row-box">
				<text class="grey-light">{{ nickName }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		<view class="row-box sb back-white prow-l item bb" @click="goBindPhone()">
			<text>绑定手机号</text>
			<view class="row-box">
				<text class="grey-light">{{ phone?phone:'绑定手机号' }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		<view class="row-box sb back-white prow-l item mb-base" @click="goIdentify()">
			<text>身份认证</text>
			<view class="row-box">
				<text class="grey-light">{{ isIdentity?'已认证':'未认证' }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import env from '@/utils/env.js'
	import { mapState, mapMutations } from "vuex"
	export default {
		data() {
			return {
				qntoken: '',  // 七牛云上传token
				phone: '', // 绑定的手机号
				isIdentity: false, // 是否身份认证
			};
		},
		computed: {
			...mapState('m_user', ['token', 'nickName', 'avatar', 'isAuthent']),
		},
		onLoad() {
			// 获取七牛上传使用TOKEN
			this.getUploadToken()
		},
		onShow() {
			// 获取用户详情
			this.getUserInfo()
		},
		methods: {
			...mapMutations('m_user', ['updateAvatar']),
			
			// 选择微信头像回调
			onChooseAvatar(e) {
				let avatarUrl = e.detail.avatarUrl
				console.log('avatarUrl', avatarUrl)
				this.uploadAvatar(avatarUrl)
			},
			
			// 选择上传前+上传修改--弃用
			async selectUploadHandle() {
				let avatarUrl = await this.chooseSingelImage(1)
				this.uploadAvatar(avatarUrl)
			},
			// 上传头像
			uploadAvatar(avatarUrl) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let pathArr = avatarUrl.split('.')
				let extra = pathArr[pathArr.length-1]
				// 获得唯一标识码
				let uniqueCode = this.generateUUID()
				// case 'ECN': uploadURL = 'https://up.qiniup.com'
				// case 'NCN': uploadURL = 'https://up-z1.qiniup.com'
				// case 'SCN': uploadURL = 'https://up-z2.qiniup.com'
				// case 'NA': uploadURL = 'https://up-na0.qiniup.com'
				// case 'ASG': uploadURL = 'https://up-as0.qiniup.com'
				uni.uploadFile({
					url: 'https://up-z2.qiniup.com',
					filePath: avatarUrl,
					name: 'file',
					formData: {
						'key': uniqueCode + '.' + extra,
						'token': this.qntoken,
					},
					success: (res) => {
						console.log('uni.uploadFile', res)
						let strToObj = JSON.parse(res.data)
						let backUrl = env.imageUrl + strToObj.key
						// 修改头像
						this.$api.UpdateUserInfo({
							icon: backUrl
						}).then(res => {
							console.log('UpdateUserInfo-success', res)
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '修改成功！',
									success: () => {
										// 处理上传成功后的返回值
										this.updateAvatar(backUrl)
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							console.log('UpdateUserInfo-fail', err)
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '修改失败！'
							})
						})
					},
					fail: (err) => {
						console.log('uni.uploadFile', err)
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '修改失败！'
						})
					}
				})
			},
			
			// 跳转修改昵称页面
			goEditNickName() {
				uni.navigateTo({
					url: `/pages/subPackage/user/my_userinfo_bind/my_userinfo_bind?type=${1}&nickName=${this.nickName}`
				})
			},
			
			// 跳转绑定手机号页面
			goBindPhone() {
				if (this.isAuthent) {
					return uni.showToast({
						icon: 'none',
						title: '已绑定手机号！'
					})
				}
				uni.navigateTo({
					url: `/pages/subPackage/user/my_userinfo_bind/my_userinfo_bind?type=${2}&phone=${this.phone}`
				})
			},
			// 跳转身份认证页面
			goIdentify() {
				uni.navigateTo({
					url: '/pages/subPackage/user/my_identify/my_identify'
				})
			},
			
			// 获取用户详情
			getUserInfo() {
				this.$api.GetUserInfo().then(res => {
					console.log('GetUserInfo-success', res)
					if (res.data.code == 200) {
						this.isIdentity = res.data.data.isIdentity
						this.phone = res.data.data.phone?res.data.data.phone:''
					} else {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: res.data.msg
						// })
					}
				}).catch(err => {
					console.log('GetUserInfo-fail', err)
				})
			}
		},
	}
</script>

<style lang="scss">
.page-container {
	
	.row-box {
		&.item-b {
			height: 168rpx;
		}
		&.item {
			height: 104rpx;
		}
		&.bb {
			border-bottom: 1rpx solid #f2f2f2;
		}
	}
}
</style>
